const PropTypes = require('prop-types');
const React = require('react');
const {
  View,
  StyleSheet,
  Platform
} = require('react-native');
const {
  JDDevice,
  JDDialog,
  JDConfirmDialog,
  JDAlertDialog,
  JDTouchable,
  JDText,
  JDTextInput
} = require('@areslabs/jdreact-core-lib');
const PageContainer = require('../../components/PageContainer');

class JDDialogExample extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  };

  state = {
    dialogShow: false,
    confirmDialogShow: false,
    alertDialogDefaultShow: false,
    alertDialogCustomShow: false,
    confirmDialogShow2: false
  };

  componentWillUnfocus = () => {
    let stateKeys = Object.keys(this.state);
    for(let key of stateKeys) {
      if (this.state[key]) {
        this._closeDialog(this.state[key]);
        return true;
      }
    }
    return false;
  };

  render() {
    return (
      <View style={{flex:1}}
        onLayout={() => {
          this.dialog && this.dialog.refreshLayout();
          this.confirmDialog && this.confirmDialog.refreshLayout();
          this.alertDialog && this.alertDialog.refreshLayout();
        }}>
        <PageContainer
          title={this.props.title}
          bodyStyle={{padding: JDDevice.getRpx(20)}}
          renderOverlay={() => {
            return [
              this._renderDialog(),
              this._renderConfirmDialog(),
              this._renderConfirmDialog2(),
              this._renderDefaultAlertDialog(),
              this._renderCustomAlertDialog(),
            ];
        }}>
            <JDTouchable onPress={ () => {this._showDialog('dialogShow')} }>
              <View style={styles.btn}>
                <JDText style={styles.btnText}>打开对话框</JDText>
              </View>
            </JDTouchable>

            <JDTouchable onPress={ () => {this._showDialog('confirmDialogShow')} }>
              <View style={styles.btn}>
                <JDText style={styles.btnText}>打开Confirm对话框</JDText>
              </View>
            </JDTouchable>
            <JDTouchable onPress={ () => {this._showDialog('confirmDialogShow2')} }>
              <View style={styles.btn}>
                <JDText style={styles.btnText}>打开Confirm对话框(有输入框)</JDText>
              </View>
            </JDTouchable>
            <JDTouchable onPress={ () => {this._showDialog('alertDialogDefaultShow')} }>
              <View style={styles.btn}>
                <JDText style={styles.btnText}>打开默认Alert对话框</JDText>
              </View>
            </JDTouchable>

            <JDTouchable onPress={ () => {this._showDialog('alertDialogCustomShow')} }>
              <View style={styles.btn}>
                <JDText style={styles.btnText}>打开自定制Alert对话框</JDText>
              </View>
            </JDTouchable>

        </PageContainer>

      </View>
    );
  }

  _renderDialog = () => {
    return (
      <JDDialog
        show={this.state.dialogShow}
        ref={v=>this.dialog=v}
        onDismiss={this._onDismiss}
        onClose={() => { this._closeDialog('dialogShow'); }}
        key="dialog">
        <View style={styles.dialogContent}>
          <View style={styles.title}>
            <JDText>提示</JDText>
          </View>
          <View style={styles.dialogBody}>
            <JDText>这里是内容！</JDText>
          </View>
        </View>
      </JDDialog>
    );
  };

  _renderConfirmDialog = () => {
    return (
      <JDConfirmDialog
        onDismiss={this._onDismiss}
        show={this.state.confirmDialogShow}
        ref={v => this.confirmDialog = v}
        onClose={() => { this._closeDialog('confirmDialogShow'); }}
        onConfirm={this._onConfirm}
        key="confirmDialog">
        <View style={styles.dialogBody}>
          <JDText>确定要离开本页吗？</JDText>
        </View>
      </JDConfirmDialog>
    );
  };
  _renderConfirmDialog2 = () => {
    return (
      <JDConfirmDialog
        show={this.state.confirmDialogShow2}
        onDismiss={this._onDismiss}
        onClose={() => { this._closeDialog('confirmDialogShow2'); }}
        onConfirm={this._onConfirm}
        onFocusUp={true}
        key="confirmDialog2">
        <View style={styles.dialogBody}>
          <JDTextInput style={[{width: 200, height: 40}, Platform.OS === 'ios' ? {borderWidth: 1, borderColor: '#CCC'} : null]}/>
        </View>
      </JDConfirmDialog>
    );
  }
  _renderDefaultAlertDialog = () => {
    return (
      <JDAlertDialog
        show={this.state.alertDialogDefaultShow}
        ref={v => this.alertDialog=v}
        onDismiss={this._onDismiss}
        onClose={() => { this._closeDialog('alertDialogDefaultShow'); }}
        key="defaultAlertDialog"
      >
          JDAlertDialog的内容可以直接是字符串哦
      </JDAlertDialog>
    );
  };

  _renderCustomAlertDialog = () => {
    return (
      <JDAlertDialog
        onDismiss={this._onDismiss}
        show={this.state.alertDialogCustomShow}
        onClose={() => { this._closeDialog('alertDialogCustomShow'); }}
        title="使用说明"
        okText="我知道了"
        key="alertDialog">
          <View style={{marginBottom: 8}}><JDText>title: alert对话框的头部标题，可以是字符串或者React元素或函数</JDText></View>
          <View style={{marginBottom: 8}}><JDText>okText: 确定按钮的文本</JDText></View>
          <View><JDText>okStyle: 确定按钮的样式</JDText></View>
      </JDAlertDialog>
    );
  };
  _onDismiss = () => {
    alert('modal消失后的回调');
  };
  _showDialog = (key) => {
    this.setState({
      [key]: true,
    });
  };

  _closeDialog = (key) => {
    this.setState({
      [key]: false,
    });
  };

  _onConfirm = () => {
    this.context.router.goBack();
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },
  btn: {
    borderRadius: JDDevice.getDpx(4),
    backgroundColor: '#f23030',
    justifyContent: 'center',
    alignItems: 'center',
    height: JDDevice.getRpx(80),
    marginBottom: JDDevice.getRpx(20),
  },
  btnText: {
    color: '#FFF'
  },

  customDialogStyle: {
    borderWidth: 5,
    borderColor: '#F00'
  },

  dialogContent: {
  },
  title: {
    height: JDDevice.getRpx(80),
    borderBottomWidth: JDDevice.getDpx(1),
    borderColor: '#555',
    paddingLeft: JDDevice.getRpx(20),
    alignItems: 'center',
    justifyContent: 'center',
  },
  dialogBody: {
    //flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: JDDevice.getRpx(20),
    height: JDDevice.getRpx(240),
  }
});

module.exports = JDDialogExample;
